<template>
  <div>
    <p>
      <b style="color: #3699ff">{{ personalInfo.name }}</b>
      的
      <b style="color: #3699ff">[ {{ personalInfo.coach_name }} ] 教练</b>
      的一对一私教课程计划表
    </p>
    <el-divider></el-divider>
    <el-button @click="showFormDialog" type="primary">新增课程</el-button>
    <el-divider content-position="left">教练列表</el-divider>

    <!-- 表格 -->
    <el-table :data="Information">
      <el-table-column label="课程价格" prop="course_price">
        <template slot-scope="scope"> ￥{{ scope.row.course_price }} </template>
      </el-table-column>
      <el-table-column label="上课日期" prop="course_date">
        <template slot-scope="scope">
          <!--  -->
          {{ ret(scope.row.course_date).split(" ")[0] }}
          <!-- {{ retimes(scope.row.course_date) }} -->
        </template>
      </el-table-column>
      <el-table-column label="上课时间" prop="course_time">
        <template slot-scope="scope">
          {{ scope.row.course_time.slice(0, 5) }}
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- @click="$router.push(`/home/seat-template?id=${scope.row.id}`)" -->
          <!-- @click="$router.push('/home/coach-update')" -->
          <el-button
            size="small"
            type="warning"
            icon="el-icon-s-grid"
            circle
            @click="
              $router.push(`/home/plesson-update?ce_id=${scope.row.ce_id}`)
            "
          ></el-button>

          <!-- @click="deleteCinemaRoom(scope.row.id)" -->
          <!-- @click="deleteCoach(scope.row.coach_id)" -->
          <el-button
            size="small"
            type="danger"
            icon="el-icon-delete"
            @click="deleteLesson(scope.row.ce_id)"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 自定义对话框 -->
    <el-dialog title="新增课程" :visible.sync="dialogFormVisible">
      <el-form
        style="padding-right: 40px"
        ref="form"
        :rules="rules"
        :model="form"
        label-width="100px"
      >
        <el-form-item label="教练id">
          <el-input
            disabled
            v-model="form.coach_id"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="课程价格" prop="course_price">
          <el-input v-model="form.course_price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="course_date" label="上课日期">
          <template>
            <div class="block">
              <span class="demonstration"></span>
              <el-date-picker
                v-model="form.course_date"
                type="date"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </div>
          </template>
        </el-form-item>
        <el-form-item prop="course_time" label="上课时间">
          <el-time-select
            v-model="form.course_time"
            :picker-options="{
              start: '08:30',
              step: '00:15',
              end: '18:30',
            }"
            placeholder="选择时间"
          >
          </el-time-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button @click="submit" type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import retimes from "@/util/util";
import httpApi from "@/http";
export default {
  data() {
    return {
      personalInfo: {}, //存储基本信息
      coachInfo: {},
      Information: [],
      dialogFormVisible: false, // 控制是否显示表单对话框

      form: {
        coach_id: this.$route.query.coach_id,
        course_price: "",
        course_date: "",
        ce_id: "",
      },
      rules: {
        course_price: [{ required: true, message: "必填", trigger: "blur" }],
        course_date: [{ required: true, message: "必选", trigger: "blur" }],
        course_time: [{ required: true, message: "必选", trigger: "blur" }],
      },
    };
  },
  mounted() {
    this.showStoreInfo();
    this.showCoachInfo();
    this.listLessons();
  },
  methods: {
    // 时间重置
    ret(T) {
      return retimes(T);
    },

    /** 显示私教课程列表 */
    listLessons() {
      let coach_id = this.$route.query.coach_id;
      // console.log("教练id", coach_id);
      httpApi.plessonApi.lessonListById({ coach_id }).then((res) => {
        console.log("私教课程列表", res);
        this.Information = res.data.data;
      });
    },

    /** 显示健身房名字 */
    showStoreInfo() {
      let store_id = this.$route.query.trends_id;
      // console.log(store_id);
      httpApi.gymApi.queryById({ store_id }).then((res) => {
        console.log("基础信息", res);
        this.personalInfo = res.data.data[0];
      });
    },

    /** 提交新增课程的表单 */
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          console.log(this.form);
          httpApi.plessonApi.add(this.form).then((res) => {
            console.log("提交的表单：", res);
            if (res.data.code == 200) {
              this.$message({ message: "成功", type: "success" });
              this.dialogFormVisible = false;
              // 重新加载列表
              this.listLessons();
            } else {
              this.$message({ message: "失败，请稍后重试", type: "error" });
            }
          });
        }
      });
    },

    /** 删除课程 */
    deleteLesson(ce_id) {
      httpApi.plessonApi.delete({ ce_id }).then((res) => {
        console.log("删除课程：", res);
        if (res.data.code == 200) {
          this.$message({ message: "删除成功", type: "success" });
          // 重新加载列表
          this.listLessons();
        } else {
          this.$message({ message: "失败，请稍后再试", type: "error" });
        }
      });
    },

    /** 显示标题教练名字 */
    showCoachInfo() {
      let coach_id = this.$route.query.coach_id;
      // console.log('通过id查找到的教练id========:',coach_id);
      httpApi.coachApi.queryById({ coach_id }).then((res) => {
        console.log("查找到的教练信息：", res);
        this.personalInfo.coach_name = res.data.data.coach_name;
      });
    },

    /**加载新增课程对话框 */
    showFormDialog() {
      this.dialogFormVisible = true; //显示对话框
    },

  
  },
};
</script>

<style lang="scss" scoped></style>
